<template>
	<div class="table-container">
		<vab-query-form>
			<el-form :model="search" @submit.native.prevent>
				<el-form-item label="所属店铺" prop="SysStoreID" v-if="user.isAdminStore">
					<remoteselect v-model="search.SysStoreID" url="api/System/SysStoreListSelect"
						value-label="SysStoreName" value-key="SysStoreID" query-key="selectIDName"
						:placeholder="replaceID(keyLan['SysStoreID'])" style="width:150px;">
						<template v-slot="{ row }">
							{{row.SysStoreName}}
						</template>
					</remoteselect>
				</el-form-item>

				<el-form-item label="系统类型" prop="EnumRunProject">
					<el-select v-model="search.EnumRunProject" clearable style="width:100px;">
						<el-option v-for="item in EnumRunProject" :key="item.Value" :value="item.Value"
							:label="item.Label"></el-option>
					</el-select>
				</el-form-item>

				<!-- <el-form-item label="处理员工">
					<el-input v-model="search.SysEmployee$SysEmployeeName__SysEmployee$PY" size="small"
						placeholder="处理员工" @keyup.native.enter="getList" style="width:120px"></el-input>
				</el-form-item> -->

				<el-form-item label="">
					<el-input v-model="search.SysCustomer$SysCustomerName__SysCustomer$Phone" size="small"
						placeholder="提交客户信息" @keyup.native.enter="getList" style="width:140px"></el-input>
				</el-form-item>

				<el-form-item label="">
					<el-input v-model="search.SysCustomerOpenID$OpenID" size="small" placeholder="提交客户OpenID"
						@keyup.native.enter="getList" style="width:140px"></el-input>
				</el-form-item>

				<el-form-item label="">
					<el-input v-model="search.Describe" size="small" placeholder="描述" @keyup.native.enter="getList"
						style="width:140px"></el-input>
				</el-form-item>

				<el-form-item label="处理状态" prop="EnumDealStatus">
					<el-select v-model="search.EnumDealStatus" clearable style="width:130px;">
						<el-option v-for="item in EnumDealStatus" :key="item.Value" :value="item.Value"
							:label="item.Label">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="创建时间">
					<el-date-picker v-model="search.CreateDate" type="daterange" placeholder="创建时间" style="width:220px">
					</el-date-picker>
				</el-form-item>

				<el-form-item>
					<el-button v-if="button.查询" icon="el-icon-search" type="primary" native-type="submit"
						@click="getList" :loading="loading">
						查询
					</el-button>
				</el-form-item>
			</el-form>
			<!-- <vab-query-form-left-panel>
			</vab-query-form-left-panel>
			<vab-query-form-right-panel>
			</vab-query-form-right-panel> -->
		</vab-query-form>

		<el-table v-loading="loading" :data="list">
			<el-table-column prop="SysStore.SysStoreName" label="所属店铺" width="130" align="left" v-if="user.isAdminStore"
				key="所属店铺"></el-table-column>

			<el-table-column prop="EnumRunProject" label="系统类型" width="100px">
				<template v-slot="scope">
					<span v-html="getLabel(scope.row.EnumRunProject,EnumRunProject)"></span>
				</template>
			</el-table-column>

			<el-table-column prop="SysCustomer" label="提交客户信息" width="170" align="left">
				<template v-slot="scope">
					<span v-if="!!scope.row.SysCustomer&&!!scope.row.SysCustomer.Phone">
						{{scope.row.SysCustomer.SysCustomerName}}/{{scope.row.SysCustomer.Phone}}
					</span>
				</template>
			</el-table-column>

			<el-table-column prop="SysCustomerOpenID" label="提交客户OpenID" width="130" align="left">
				<template v-slot="scope">
					<span v-if="!!scope.row.SysCustomerOpenID">
						{{scope.row.SysCustomerOpenID.OpenID}}
					</span>
				</template>
			</el-table-column>

			<el-table-column prop="Describe" label="描述" width="250" align="left"></el-table-column>

			<el-table-column prop="ImageUrl1" label="图片" width="250" align="center">
				<template v-slot="scope">
					<template v-for="index of 5">
						<el-image class="img" :preview-src-list="ImageUrlList(scope.row)"
							:src="scope.row['ImageUrl' + index]" :key="index" v-if="!!scope.row['ImageUrl' + index]"
							style="width:37px;height:37px;margin-right: 5px;">
						</el-image>
					</template>
				</template>
			</el-table-column>

			<el-table-column prop="EnumDealStatus" label="处理状态" width="100px">
				<template v-slot="scope">
					<span v-html="getLabel(scope.row.EnumDealStatus,EnumDealStatus)"></span>
				</template>
			</el-table-column>

			<el-table-column prop="Count" label="回复条数" width="100" align="left"></el-table-column>

			<el-table-column prop="CreateDate" label="创建时间" width="230px" align="left">
				<template v-slot="scope">
					<span v-if="!!scope.row.CreateDate">{{format(scope.row.CreateDate)}}</span>
				</template>
			</el-table-column>

			<el-table-column prop="Remark" label="备注" width="300" align="left"></el-table-column>

			<el-table-column2 label="操作" v-if="button.处理">
				<template v-slot="scope">
					<el-button type="text" @click="btnEdit(scope.row)" v-if="button.处理">处理</el-button>
				</template>
			</el-table-column2>
		</el-table>
		<el-pagination :current-page="search.index" :page-size="search.size" :total="total"
			@current-change="indexChange" @size-change="sizeChange"></el-pagination>

		<!--处理-->
		<el-dialog :visible.sync="visible" title="处理" :close-on-click-modal="false" width="95%" @close="getList">
			<el-row>
				<el-col :span="8">
					<el-form size="small" :model="form" :rules="formRules" ref="form" label-width="100px"
						@submit.native.prevent :inline="false">
						<el-form-item label="处理状态" prop="EnumDealStatus">
							<el-radio-group v-model="form.EnumDealStatus">
								<el-radio v-for="item in EnumDealStatus" :key="item.Value" :value="item.Value"
									:label="item.Value">
									{{item.Label}}
								</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="处理内容" prop="DealContent">
							<el-input type="textarea" :rows="2" v-model="form.DealContent" style="width: 100%;">
							</el-input>
						</el-form-item>
						<el-form-item label="处理图片" prop="">
							<uploadimg v-model="DealImageUrl" :max="5"></uploadimg>
						</el-form-item>
						<el-form-item label="备注" prop="Remark">
							<el-input type="textarea" :rows="2" v-model="form.Remark" style="width: 100%;"></el-input>
						</el-form-item>
					</el-form>
					<div class="dialog-footer" style="text-align: center;">
						<el-button @click="visible=false;">取消</el-button>
						<el-button type="primary" @click="dealSave" :loading="loading2">保存</el-button>
					</div>
				</el-col>
				<el-col :span="16">
					<div class="vab-query-form">
						<el-form :model="search2" @submit.native.prevent>
							<el-form-item label="">
								<el-input v-model="search2.SysEmployee$SysEmployeeName__SysEmployee$PY" size="small"
									placeholder="处理员工" @keyup.native.enter="getList2" style="width:130px"></el-input>
							</el-form-item>
							<el-form-item label="" prop="EnumDealStatus">
								<el-select v-model="search2.EnumDealStatus" clearable style="width:130px;"
									placeholder="处理状态">
									<el-option v-for="item in EnumDealStatus" :key="item.Value" :value="item.Value"
										:label="item.Label">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="创建时间">
								<el-date-picker v-model="search2.CreateDate" type="daterange" placeholder="创建时间"
									style="width:220px">
								</el-date-picker>
							</el-form-item>
							<el-form-item>
								<el-button icon="el-icon-search" type="primary" native-type="submit" @click="getList2"
									:loading="loading2">
									查询
								</el-button>
							</el-form-item>
						</el-form>
					</div>

					<el-table v-loading="loading2" :data="list2">
						<el-table-column prop="SysEmployee" label="处理员工" width="100" align="left">
							<template v-slot="scope">
								<span v-if="!!scope.row.SysEmployee&&!!scope.row.SysEmployee.SysEmployeeName">
									{{scope.row.SysEmployee.SysEmployeeName}}
								</span>
							</template>
						</el-table-column>

						<el-table-column prop="DealContent" label="处理内容" width="200" align="left"></el-table-column>

						<el-table-column prop="DealImageUrl1" label="图片" width="250" align="center">
							<template v-slot="scope">
								<template v-for="index of 5">
									<el-image class="img" :preview-src-list="ImageUrlList(scope.row,'DealImageUrl')"
										:src="scope.row['DealImageUrl' + index]" :key="index"
										v-if="!!scope.row['DealImageUrl' + index]"
										style="width:37px;height:37px;margin-right: 5px;">
									</el-image>
								</template>
							</template>
						</el-table-column>

						<el-table-column prop="EnumDealStatus" label="处理状态" width="100px">
							<template v-slot="scope">
								<span v-html="getLabel(scope.row.EnumDealStatus,EnumDealStatus)"></span>
							</template>
						</el-table-column>

						<el-table-column prop="CreateDate" label="处理时间" width="230px" align="left">
							<template v-slot="scope">
								<span v-if="!!scope.row.CreateDate">{{format(scope.row.CreateDate)}}</span>
							</template>
						</el-table-column>

						<el-table-column prop="Remark" label="备注" width="" align="left"></el-table-column>
					</el-table>
					<el-pagination :current-page="search2.index" :page-size="search2.size" :total="total2"
						@current-change="indexChange2" @size-change="sizeChange2"></el-pagination>
				</el-col>
			</el-row>
		</el-dialog>
	</div>
</template>

<script>
	import common from "@/common/common.js";

	export default {
		name: "SysFeedbackList",
		mixins: [common.baseVM],
		components: {},
		computed: {},
		data() {
			return {
				button: {
					查询: true,
					处理: true
				},
				list: [],
				total: 0,
				search: {
					index: 1,
					size: 10,

					SysStoreID: null,
					EnumRunProject: null,
					SysCustomer$SysCustomerName__SysCustomer$Phone: null,
					SysCustomerOpenID$OpenID: null,
					Describe: null,
					CreateDate: [],
					EnumDealStatus: 0
				},

				form: {
					SysFeedbackID: null,
					EnumDealStatus: 20,
					DealContent: '',
					DealImageUrl1: '',
					DealImageUrl2: '',
					DealImageUrl3: '',
					DealImageUrl4: '',
					DealImageUrl5: '',
					Remark: ''
				},
				DealImageUrl: [],

				formRules: {
					EnumDealStatus: [{
							required: true,
							message: '请选择处理状态',
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => {
								if (value === null || value === '') {
									callback(new Error('请选择处理状态'));
								} else {
									callback();
								}
							},
							trigger: 'blur'
						}
					],
					DealContent: [{
						required: true,
						message: '请输入处理内容',
						trigger: 'blur'
					}, {
						validator: (rule, value, callback) => {
							if (value === null || value === '') {
								callback(new Error('请输入处理内容'));
							} else {
								callback();
							}
						},
						trigger: 'blur'
					}]
				},

				visible: false,

				search2: {
					index: 1,
					size: 10,

					SysEmployee$SysEmployeeName__SysEmployee$PY: null,
					CreateDate: [],
					EnumDealStatus: null
				},
			};
		},
		computed: {
			EnumRunProject() {
				return this.emptyArray(window["EnumRunProject"]);
			},
			EnumDealStatus() {
				return this.emptyArray(window["EnumDealStatus"]);
			}
		},
		methods: {
			init() {
				this.getList();
			},
			ImageUrlList(row, name) {
				if (name == null || name == "") name = "ImageUrl";
				var r = [];
				var item = row;
				for (var i = 1; i <= 5; i++) {
					var val = item[name + i];
					if (!!val) {
						r.push(val)
					}
				}
				return r;
			},
			gDealImageUrl() {
				var list = [];
				for (var i = 0; i < 5; i++) {
					var name = "DealImageUrl" + (i + 1).toString();
					var item = this.model[name];
					if (!!item) {
						list.push(item);
					}
				}
				this.DealImageUrl = list;
			},
			sDealImageUrl() {
				for (var i = 0; i < 5; i++) {
					var name = "DealImageUrl" + (i + 1).toString();
					var item = this.DealImageUrl.length > i ? this.DealImageUrl[i] : "";
					this.form[name] = item;
				}
			},

			dealSave() {
				this.sDealImageUrl();

				this.formValidate('form', () => {
					this.loading2 = true;
					this.post("api/System/SysFeedbackAddRecord", this.form).then((data) => {
						this.showToast(data.Message, "success");
						// this.visible = false;
						this.loading2 = false;

						this.btnEdit({
							SysFeedbackID: this.form.SysFeedbackID
						});
					}).catch(() => {
						this.loading2 = false;
					});
				});
			},

			btnEdit(row) {
				// this.$refs["edit"].show(row);
				this.getList2();
				this.visible = true;
				this.resetVal('form');
				this.resetVal('DealImageUrl');
				this.form.SysFeedbackID = row.SysFeedbackID;
			},

			getList() {
				this.loading = true;
				this.post('api/System/SysFeedbackList', this.getSearchData()).then(data => {
					this.list = data.Result;
					this.total = data.Total;
					this.loading = false;
				}).catch(error => {
					this.loading = false;
				});
			},

			getList2() {
				this.loading2 = true;
				this.post('api/System/SysFeedbackRecordList', this.getSearchData2()).then(data => {
					this.list2 = data.Result;
					this.total2 = data.Total;
					this.loading2 = false;
				}).catch(error => {
					this.loading2 = false;
				});
			}
		},
	};
</script>
